<template>
  <div>
    <div class="topTop"></div>
    <div class="topDiv">
      <div class="topDivTitle">正在装修:{{ title }}</div>
      <div style="margin-right: 40px">
        <a-button :style="{ marginRight: '8px' }" @click="handleCancel">关闭</a-button>
        <a-button @click="handleOk" type="primary">发布</a-button>
      </div>
    </div>
    <div style="display: flex">
      <div class="bgcdiv">
        <div class="shouye">首页</div>
        <div class="bigDiv">
          <div class="bianji" @dblclick="handleEdit('shouye')" >双击编辑内容</div>
          <img :src="background.inviterBackgroundImage" style="width: 375px; height: 1048px"/>
          <div style="position: absolute;top:332px">
            <div class="tzDiv">
              <div
                :style="{ 'background-color': background.sloganBackgroundColor, 'border-color': background.sloganFrameColor }"
                class="tongzhi">
                <!-- 喇叭 -->
                <img :src="background.sloganImage" alt="" class="lb" />
                <span class="xcText" :style="{ color: background.sloganTextColor }">{{ background.sloganContent
                }}</span>
              </div>
              <div class="guize"
                :style="{ color: background.inviterRuleTextColor, 'border-bottom-color': background.inviterRuleTextColor }">
                规则</div>
            </div>
            <div class="hyktitle" :style="{ color: background.inviterTitleTextColor }">请选择您想要赠送的会员卡</div>
            <!--轮播背景  -->
            <div class="kuangbj" :style="{ 'background-image': 'url(' + background.inviterCardImage + ')' }">
              <div>
                <div class="lunboImg">
                  <a-carousel autoplay>
                  <div v-for="item in imgList" :key="item.id">
                    <img :src=item style="width: 297px; height: 124px;" />
                  </div>
                </a-carousel>
                </div>
                
                <div class="xuanzedui">
                  <!-- <div class="bianhao">G09818281</div> -->
                  <div class="buxian" :style="{ color: background.inviterNumTextColor }">不限</div>
                </div>
                <div class="text">商品购买享受优惠价格，可在商品详情页查看</div>
              </div>
            </div>

            <div class="qzs"
              :style="{ color: background.inviterButtonTextColor, 'background-color': background.inviterButtonColor }">
              去赠送</div>
            <div class="lqjl">
              <div class="bottom">
                <div class="lqtitle">领取记录</div>
                <div class="content">
                  <div style="height: 29px; font-size: 12px">
                    <div>
                      <div style="height: 12px; line-height: 12px">张*爱</div>
                      <div style="height: 12px; line-height: 12px; margin-top: 5px">2022/12/11 12:21:22</div>
                    </div>
                  </div>
                  <div class="right">
                    <img src="../../../assets/newmember/icon1.png" alt="" style="width: 24px; height: 24px" />
                    <div style="font-size: 12px">会员银卡</div>
                  </div>
                </div>

                <div class="content">
                  <div style="height: 29px; font-size: 12px">
                    <div>
                      <div style="height: 12px; line-height: 12px">张*爱</div>
                      <div style="height: 12px; line-height: 12px; margin-top: 5px">2022/12/11 12:21:22</div>
                    </div>
                  </div>
                  <div class="right">
                    <img src="../../../assets/newmember/icon2.png" alt="" style="width: 24px; height: 24px" />
                    <div style="font-size: 12px">会员金卡</div>
                  </div>
                </div>

                <div class="content">
                  <div style="height: 29px; font-size: 12px">
                    <div>
                      <div style="height: 12px; line-height: 12px">张*爱</div>
                      <div style="height: 12px; line-height: 12px; margin-top: 5px">2022/12/11 12:21:22</div>
                    </div>
                  </div>
                  <div class="right">
                    <img src="../../../assets/newmember/icon3.png" alt="" style="width: 24px; height: 24px" />
                    <div style="font-size: 12px">会员铂金卡</div>
                  </div>
                </div>

                <div class="content">
                  <div style="height: 29px; font-size: 12px">
                    <div>
                      <div style="height: 12px; line-height: 12px">张*爱</div>
                      <div style="height: 12px; line-height: 12px; margin-top: 5px">2022/12/11 12:21:22</div>
                    </div>
                  </div>
                  <div class="right">
                    <img src="../../../assets/newmember/icon4.png" alt="" style="width: 24px; height: 24px" />
                    <div style="font-size: 12px">会员白金卡</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 落地页 -->
      <div class="bgcdiv">
        <div class="shouye">落地页</div>
        <div class="ldbigDiv">
          <div class="ldbianji" @dblclick="handleEdit('luodi')" >双击编辑内容</div>
          <img :src="background.inviteeBackgroundImage" style="width: 375px; height: 981px" />
          <div style="position: absolute; top: 332px">
            <div class="ldhyktitle" :style="{ color: background.inviteeTitleTextColor }">您收到的会员卡</div>
            <div class="ldkuangbj" :style="{ 'background-image': 'url(' + background.inviteeCardImage + ')' }">
              <div>
                <img :src="imgList[0]" alt="" class="ldlunboImg" />
                <div class="xuanzedui">
                  <!-- <div class="bianhao">G09818281</div> -->
                  <div class="ldbuxian" :style="{ color: background.inviteeValidTextColor }">有效期至：永久有效</div>
                </div>
                <div class="ldtext">商品购买享受优惠价格，可在商品详情页查看</div>
              </div>
            </div>

            <div class="ldqzs"
              :style="{ color: background.inviteeButtonTextColor, 'background-color': background.inviteeButtonColor }">
              立即领取</div>
            <div class="ldlqjl">
              <div class="bottom">
                <div class="lqtitle">规则说明</div>
                <div class="ldcontent">
                  <div class="titletext">1.被邀人领卡注册后即享有对应会员权益。</div>
                  <div class="titletext">2.7天保护期后，激活邀约特权。</div>
                  <div class="titletext">3.规则说明文案规则说明文案规则说明文案规则说明。</div>
                  <div class="titletext">4.被邀人领卡注册后即享有对应会员权益。</div>
                  <div class="titletext">5.7天保护期后，激活邀约特权。</div>
                  <div class="titletext">6.规则说明文案规则说明文案规则说明文案规则说明。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <editDecorations ref="modalForm" @ok="modalFormOk"></editDecorations>
  </div>
</template>
<script>
import editDecorations from './modules/editDecorations'
import { getRenovationItemByParentId, saveOrReleaseRenovationItem, vipTypeList, getRenovationItemVipTypeImage } from '@/api/marketingCenter/newmember'
export default {
  components: { editDecorations },
  data() {
    return {
      vipTypeId:"",
      imgList: [],
      bianji:false,
      id: this.$route.params.id,
      title: localStorage.getItem('decorationsTitle'),
      ldbgcdi: require('../../../assets/newmember/bgcldy.png'),
      background: {
        bgbackgroundImagecdi: require('../../../assets/newmember/bgcsy.png'), //首页背景底图
        bgbackgroundImagecdi: require('../../../assets/newmember/bgcsy.png'), //落地页背景底图
        inviterCardImage: require('../../../assets/newmember/xuanchuan.png'), //首页轮播底图
        inviteeCardImage: require('../../../assets/newmember/xuanchuan.png'), //落地页轮播底图
        sloganBackgroundColor: '#DCE8CA', //通知框背景
        sloganTextColor: '#333333', //通知文字色号
        inviterRuleTextColor: '#333333', //规则文字色号
        sloganFrameColor: '#333333', //通知边框色号
        inviterTitleTextColor: '#333333', //首页标题文字色号
        inviteeTitleTextColor: '#333333', //落地标题文字色号
        buttonTextColor: '#333333', //按钮文字色号
        buttonColor: '#333333', //按钮色号
        brandCardImage0: require('../../../assets/newmember/yinka.png'), //银卡
        brandCardImage1: require('../../../assets/newmember/jinka.png'), //金卡
        brandCardImage2: require('../../../assets/newmember/baijinka.png'), //白金卡
        brandCardImage3: require('../../../assets/newmember/bojinka.png') //铂金卡
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()

  },
  mounted() { },
  methods: {
    getList() {
      getRenovationItemByParentId({ parentId: this.id }).then(res => {
        this.fabu = res.data
        this.background = res.data
        console.log(res.data.inviterNumTextColor);
        if (this.background.vipTypeId == '' || this.background.vipTypeId == -1) {
          vipTypeList({ brandId: localStorage.getItem('decorationsBrandId') }).then(res => {
            this.vipTypeId = res.data[0].id
            this.getimgList()
          })
        }else{
          this.vipTypeId = res.data.vipTypeId
          this.getimgList()
        }
        
      })
    },
    getimgList(){
      getRenovationItemVipTypeImage({ brandId: localStorage.getItem('decorationsBrandId'), vipTypeId: this.vipTypeId }).then(res => {
          res.data.forEach(element => {
            this.imgList.push(element.imgUrl)
          });
         })
    },
    handleEdit(record) {
      this.$refs.modalForm.edit(this.background,record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    modalFormOk() {
      this.getList();
    },
    onChange(a, b, c) {
      console.log(a, b, c)
    },
    handleCancel() {
      this.$router.push(`/marketingCenter/newmember/decorations`)
    },
    handleOk() {
      const that = this
      this.background.type = 1
      this.background.parentId = this.id
      saveOrReleaseRenovationItem(this.background).then(res => {
        if (res.success) {
          that.$message.success(res.msg)
          this.$router.push(`/marketingCenter/newmember/decorations`)
        } else {
          that.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style  scoped>
/* 轮播图点 */
.ant-carousel >>>.slick-slide {
  margin-top: 35px;
  /* margin-left: 7px; */
  text-align: center;
  height: 149px;
  line-height: 149px;
  background: transparent;
  overflow: hidden;
}
/deep/.m-colorPicker .box{
  margin-top: -300px !important;
  margin-left: 55px !important;
}
/deep/.ant-carousel .slick-dots li.slick-active button {
  background: #758f48 !important;
}

/deep/.ant-carousel .slick-dots li button {
  height: 8px !important;
  border-radius: 50%;
  width: 8px !important;
  background: #000 !important;
}

/deep/.ant-carousel .slick-dots li {
  margin: 0 4px !important;
}
.topTop{
  width: 100%;
  height: 96px;
  position: absolute;
  background-color: #f0f2f5;
  position: fixed;
  top: 50px;
  z-index: 2;
}
.topDiv {
  height: 84px;
  position: fixed;
  width: calc(100% - 220px);
  line-height: 84px;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  z-index: 3;
}

.topDivTitle {
  margin-left: 40px;
  color: #303133;
  font-size: 16px;
}

.kuangbj {
  margin-top: 20px;
  width: 375px;
  height: 230px;
  background-size: 375px 230px;
}

.ldkuangbj {
  margin-top: 20px;
  width: 375px;
  height: 230px;
  background-size: 375px 230px;
}

.lunbo {
  z-index: 99;
  /* position: absolute;
  top: 500px; */
}

/* .bianhao {
  margin-left: 47px;
  margin-top: -47px;
  color: #FFFFFF;
  z-index: 999;
  font-size: 10px;
} */

.xuanzedui {
  /* position: relative; */
}

.ldlunbo {
  /* width: 297px;
  height: 124px;
  top: 35px;
  left: 19px; */

}

.ldlunboImg {
  width: 297px;
  height: 124px;
  margin-top: 30px;
  margin-left: 39px;
}
.lunboImg {
  width: 297px;
  height: 124px;
  margin-top: 30px;
  margin-left: 39px;
  /* border: 1px solid #ccc; */
}

.shouye {
  margin-left: 169px;
}

.bigDiv {
  width: 375px;
  height: 1048px;
  margin-top: 27px;
  position: relative;
}

.bigDiv:hover .bianji{
  display: block;
}
/* 编辑 */
.bianji{
  user-select:none;
  font-size: 16px;
  width: 375px;
  height: 1048px;
  line-height: 1048px;
  background-color: rgba(146, 168, 182, 0.9000);
  border: 2px dashed #FF0102;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  z-index: 1;
  display: none;
}
.ldbianji{
  user-select:none;
  width: 375px;
  height: 993px;
  line-height: 1048px;
  background-color: rgba(146, 168, 182, 0.9000);
  border: 2px dashed #FF0102;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  z-index: 1;
  font-size: 16px;
  display: none;
}
.ldbigDiv {
  width: 375px;
  height: 981;
  margin-top: 27px;
  position: relative;
}
.ldbigDiv:hover .ldbianji{
  display: block;
}
.lb {
  width: 16px;
  height: 16px;
  margin-left: 14px;
}

.xcText {
  font-size: 12px;
  line-height: 28px;
  margin-left: 5px;
}

.guize {
  margin-left: 8px;
  height: 28px;
  border-style: solid;
  border-color: transparent;
  border-bottom-width: 2px;
  font-size: 14px;
  color: #758f48;
  line-height: 28px;
}

.bgcdiv {
  margin-left: 40px;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
  margin-top: 108px;
}

.tzDiv {
  display: flex;
}

.tongzhi {
  width: 298px;
  height: 28px;
  border-style: solid;
  border-width: 1px;
  border-radius: 15px;
  margin-left: 20px;
  overflow: hidden;
}

.hyktitle {
  margin-top: 37px;
  margin-left: 79px;
  font-size: 18px;
  font-weight: 800;
}

.ldhyktitle {
  margin-left: 124px;
  font-size: 18px;
  font-weight: 800;
}

/* .xuanzedui {
  display: flex;
  justify-content: space-between;
  margin-top: -40px;
}
.xuanze {
  width: 16px;
  height: 16px;
  border: 1px solid #758f48;
}
.xuanzeText {
  color: #758f48;
  font-size: 12px;
  margin-left: 6px;
}*/
.buxian {
  font-size: 12px;
  /* color: rgba(255, 255, 255, 0.4000); */
  position: absolute;
  top: 250px;
  left: 54px;
}
.ldbuxian {
  font-size: 12px;
  /* color: rgba(255, 255, 255, 0.4000); */
  position: absolute;
  top: 169px;
  left: 54px;
}
.text {
  color: #666666;
  font-size: 12px;
  margin-left: 67px;
  margin-top: 59px;
}

.ldtext {
  color: #666666;
  font-size: 12px;
  text-align: center;
  margin-top: 19px;
}

.qzs {
  width: 325px;
  height: 56px;
  line-height: 56px;
  border-radius: 28px;
  font-size: 18px;
  text-align: center;
  margin-left: 25px;
  margin-top: 20px;
}

.ldqzs {
  margin-top: 20px;
  width: 325px;
  height: 56px;
  line-height: 56px;
  border-radius: 28px;
  font-size: 18px;
  text-align: center;
  margin-left: 25px;
}

.lqjl {
  margin-top: 30px;
  margin-left: 20px;
}

.ldlqjl {
  margin-top: 30px;
  margin-left: 20px;
}

.bottom {
  width: 335px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #333333;
}

.lqtitle {
  height: 12px;
  font-size: 18px;
  font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
  font-weight: 800;
  color: #333333;
  line-height: 12px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 21px;
}

.content {
  display: flex;
  justify-content: space-between;
  margin: 0 20px 15px;
}

.ldcontent {
  color: #333333;
  font-size: 12px;
  margin-left: 20px;
  padding-bottom: 40px;
}

.titletext {
  margin-top: 5px;
}

.right {
  display: flex;
  height: 29px;
  line-height: 29px;
}
</style>